<template>
  <!-- 角色管理 -->
  <!-- 
    1.渲染表格  
      准备接口【理解参数】
      data中准备响应式数据
      调用接口获取数据
      把后端数据交给响应式属性
      table绑定响应式属性
    2.分页流程
    3.分页和table 联动
      点击页数时 table数据会随之改变
      决定table 当前渲染的数据是由什么决定的？page -> 获取新的数据 -> roleList 它一变 视图就会变
      决定当前page是几 由分页器决定 分页器点击哪页 当前 page就是几
      流程 点击分页器的页数 得到page -》使用最新的page请求数据得到当前页的数据列表 -》把拿到的数据重新交给roleList
  -->
  <div class="setting-container">
    <div class="app-container">
      <el-card class="box-card">
        <el-row style="height: 60px">
          <el-button type="primary" @click="addDialog">+ 新增角色</el-button>
        </el-row>
        <el-table border :data="tableList" v-loading="loading" style="width: 100%">
          <el-table-column label="序号" type="index" align="center" width="120"></el-table-column>
          <el-table-column label="角色名" prop="name" align="center" width="240"></el-table-column>
          <el-table-column label="描述" align="center" prop="description"></el-table-column>
          <el-table-column label="操作" width="240" align="center">
            <!-- 插槽 -->
            <template #default={row}>
              <!-- 给角色分配权限 {id:角色id, permIds:[] 所有选中的节点的id组成的数组} -->
              <el-button type="text" small @click="assign(row.id)">分配权限</el-button>
              <el-button type="text" small @click="modify(row.id)">修改</el-button>
              <el-button type="text" small @click="fetchDelRole(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="right"  style="height: 60px">
        <!-- 
          分页器 页数 = 总条数 total/ 每页条数pagesize
          需求 需要给组件传递两个必要的参数 total pagesize
          page-size 每页显示条目个数
          total 总条数 prev上一条 pager页码列表  next下语句
          @size-change 处理页码大小
          @current-change  页码变动时触发
          current-page 当前页数
          @size-change="sizeChange"
        -->
          <el-pagination
            @current-change="currentChange"
            :current-page="params.page"
            :page-size="params.pagesize"
            layout="total, prev, pager, next"
            :total="total">
          </el-pagination>
        </el-row>
      </el-card>
      <add-role 
        ref="dialog"
        :show-dialog="dialogVisible"
        @close-dialog="closeDialog" 
        @reset-list="fetchRoleList">
      </add-role>
      <!-- 分配权限弹框 -->
      <assign-role
      :dialog-visible="assignVisible"
      @close-dialog="closeAssignDialog"
      :cur-id="curId"
      @open-dialog="assign">
      </assign-role>
    </div>
  </div>
</template>

<script>
import {getRoleList, deleteRole} from '@/api/setting'
import AssignRole from '@/views/Setting/components/assign-role.vue'
// 导入
import addRole from './components/add-role.vue'
export default {
  components: {
    addRole,
    AssignRole
  },
  data() {
    return {
      tableList: [],
      params: {
        // 当前页数 
        page: 1,
        // 每页条数
        pagesize: 5
      },
      total: 0,
      loading: false,
      // 弹框显示
      dialogVisible: false,
      assignVisible: false,
      curId:'',//
      checkList: []//分配的权限数组
    }
  },
  mounted() {
    this.fetchRoleList()
  },
  methods: {
    // 获取表格列表
    async fetchRoleList() {
      this.loading = true
      const res = await getRoleList(this.params)
      // console.log(res.rows);
      // console.log(res.total);
      this.tableList = res.rows
      this.total = res.total
      this.loading = false
    },
    // 每页条数改变时 触发
    // sizeChange(size) {},
    // 当前页改变时触发
    currentChange(page) {
      this.params.page = page//更新当前页
      // 更新表格数据
      this.fetchRoleList()
    },
    // 打开新增弹框
    addDialog() {
      // this.title = '新增弹框'
      this.dialogVisible = true
    },
    // 修改弹窗
    modify(id) {
      // this.title = '编辑弹框'
      this.dialogVisible = true
      // console.log(id);
      // 调接口数据回填 在子组件做 掉子组件身上的方法 并传递id
      this.$refs.dialog.roleDetails(id)
    },    
    // 关闭弹窗
    closeDialog() {
      this.dialogVisible = false
    },
    // 删除
    fetchDelRole(id) {
      // 询问用户
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async()=> {
          // 确认删除
          // 调删除接口
          await deleteRole(id)
          // 提示用户
          this.$message.success('删除成功')
          // 更新列表数据
          this.fetchRoleList()
        })
      
    },
    openAssignDialog() {
      this.assignVisible = true
    },
    closeAssignDialog() {
      this.assignVisible = false
    },
    async assign(id) {
      this.assignVisible = true
      // console.log(id);
      this.curId = id
      // 调获取获取详情接口 
    }
  }
}
</script>

<style scss scoped>
  
</style>